<!--
 * @Description: 关_棺
 * @Author: 关_棺
 * @Date: 2024-06-03 08:10:33
 * @LastEditTime: 2024-12-17 14:35:37
 * @FilePath: \supervision-ui\src\views\system\Approval\index.vue
 * @FileName: 审批.vue
-->
<template>
  <div class="plt20">
    <el-row style="width: calc(100%)" :gutter="20">
      <el-col :span="8" id="queryH">
        <el-form ref="form" :model="form" label-width="40px">
          <el-col :span="9">
            <el-form-item label="名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-button type="primary">查询</el-button>
          <el-button>取消</el-button>
          <el-button type="primary" @click="add()">新增</el-button>
        </el-form>
        <el-table
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="tableData"
          v-loading="loading"
          :height="tabH"
          border
        >
          <el-table-column width="45">
            <template slot-scope="scope">
              <el-radio @change="info1" v-model="id" :label="scope.row.id">{{
                ""
              }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="序号"> </el-table-column>
          <el-table-column prop="classifyName" label="审批模版">
          </el-table-column>
          <el-table-column prop="deptId" label="部门名称">
            <template slot-scope="{ row }">{{
              deptNameS[row.deptId]
            }}</template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="add(row.id)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      /></el-col>
      <el-col :span="16" :style="`height: ${tabH1};position: relative`">
        <!-- <nodeWrap
          class="he"
          v-bind="$attrs"
          :nodeConfig="nodeConfig"
          :dataFields="dataFields"
          :style="`height: ${tabH1}`"
        ></nodeWrap> -->
        <div class="process-right">
          <!-- <el-button type="primary" disabled>保存配置</el-button> -->
          <!-- 流程图 -->
          <el-button type="primary" class="btn-style" @click="saveData($event)"
            >保存</el-button
          >
          <div class="approval-flow fd-nav-content">
            <div class="dingflow-design">
              <div class="zoom flex">
                <div
                  :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')"
                  @click="zoomSize(1)"
                ></div>
                <span>{{ nowVal }}%</span>
                <div
                  :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')"
                  @click="zoomSize(2)"
                ></div>
              </div>
              <div
                class="box-scale"
                id="box-scale"
                :style="
                  'transform: scale(' +
                  nowVal / 100 +
                  '); transform-origin: 50% 0px 0px;'
                "
              >
                <div class="end-node flex">
                  <p>开始</p>
                </div>
                <nodeWrap
                  :nodeConfig="nodeConfig"
                  :dataFields="dataFields"
                  :isTried="isTried"
                ></nodeWrap>
                <div class="end-node flex">
                  <p>结束</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <add-dialog ref="addDialog" @dialogBack="(e) => getList(e)" />
  </div>
</template>

<script>
import { resizeMixin } from "@/mixins/resizeMixin";
import nodeWrap from "@/flowchart/nodeWrap.vue";
import addDialog from "./components/addDialog.vue";
import { mapState } from "vuex";
import {
  approvalClassifyList,
  approvalClassifySaveOrModifyClassify,
  approvalClassifyInfo,
} from "@/api/system/Approval";
export default {
  mixins: [resizeMixin],
  computed: {
    ...mapState({
      deptNameS: (state) => state.user.deptNameS,
    }),
  },
  components: { nodeWrap, addDialog },
  data() {
    return {
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        // total: 1,
      },
      total: 0,
      id: "",
      form: {
        classifyName: "",
        remark: "",
        deptId: "",
        type: "",
      },
      nodeConfig: {
        error: true,
      },
      menu: {
        typeCode: "",
        deptIds: "",
        positionIds: "",
        staffIds: "",
        approvalKeys: "",
        approvalKeyValues: "",
      },
      tableData: [],
      obj: {},
      isTried: false,
      loading: true,
      dataFields: [
        { name: "日期", key: "date", type: "date" },
        { name: "地址", key: "adress" },
        { name: "状态", key: "state" },
      ],
      nowVal: 100,
    };
  },

  async mounted() {
    await this.$nextTick();
    this.getList();
  },
  methods: {
    async getList() {
      let { data } = await approvalClassifyList(this.queryParams);
      // console.log(res);
      this.tableData = data.records;
      this.total = data.total;
      this.loading = false;
      this.init();
    },
    init() {
      this.id = this.tableData[0].id;
      this.info1();
    },
    info1() {
      let obj = this.tableData.find((e) => e.id == this.id);
      this.obj = obj;
      this.nodeConfig= {
        error: true,
      }
      this.info();
    },
    zoomSize(type) {
      if (type == 1) {
        if (this.nowVal == 50) {
          return;
        }
        this.nowVal -= 10;
      } else {
        if (this.nowVal == 300) {
          return;
        }
        this.nowVal += 10;
      }
    },
    saveData(el, type) {
      if (!this.nodeConfig.childNode && type != 1) {
        return this.$modal.msgWarning(`请添加流程后在进行保存！`);
      }
      this.menu = {
        deptIds: "",
        approvalKeyValues: "",
        approvalKeys: "",
        positionIds: "",
        staffIds: "",
      };
      this.arr = [];
      // log
      this.isTried = true;
      this.tipList = [];
      console.log("this.nodeConfig", this.nodeConfig);
      // this.reErr(this.nodeConfig)
      // if (this.tipList.length != 0) {
      //   return;
      // }
      this.workflowSave();
    },
    handleData(data, n) {
      // nodeUserType
      if (data.childNode) {
        n++;
        if (!data.childNode.nodeUserType.deptId)
          return (
            this.$modal.msgWarning(`请输入第${n}行的部门`), (this.type = false)
          );
        if (data.childNode.nodeUserType) {
          console.log(
            "data.childNode.nodeUserType.deptName",
            data.childNode.nodeUserType.deptName
          );
          this.arr.push({
            id: 101,
            type: "0",
            pid: null,
            level: 0,
            people: {
              id: 1021,
              name: "121",
              deptId:
                data.childNode.nodeUserType.deptId[
                  data.childNode.nodeUserType.deptId.length - 1
                ],
              userId: data.childNode.nodeUserType.userId + "",
              deptName: data.childNode.nodeUserType.deptName,
              userName: data.childNode.nodeUserType.userName,
            },
          });
          // this.menu.deptIds += data.childNode.nodeUserType.deptIds + ','
          // this.menu.positionIds += data.childNode.nodeUserType.positionIds + ','
          // this.menu.staffIds += data.childNode.nodeUserType.staffIds + ','
          // this.menu.approvalKeys += 0 + ','
          // this.menu.approvalKeyValues += 0 + ','
          this.type = true;
          this.handleData(data.childNode, n);
        }
      }
      return data;
    },
    async workflowSave(el) {
      // 调接口存数据
      // this.menu= {};
      // 把编码赋值给 typecode
      // this.menu.typeCode =  row.classifyCode
      // console.log(this.nodeConfig);
      let data = this.handleData(this.nodeConfig, 0);
      // let data = this.handleData(this.nodeConfig.childNode);
      // console.log("data", data);
      // console.log(this.arr)
      if (this.arr.length && this.type) {
        let obj = {};
        let obj1 = {};
        this.arr.forEach((e, index) => {
          obj1[index] = [e];
        });
        // return console.log(this.arr);
        obj = {
          classifyName: this.obj.classifyName,
          remark: this.obj.remark,
          createUser: this.obj.createUser,
          createUserId: this.obj.createUserId,
          deptId: this.obj.deptId,
          deptName: this.deptNameS[this.obj.deptId],
          id: this.obj.id,
          jsonMap: {
            frontEndId: JSON.stringify(this.nodeConfig),
            nodeMap: obj1,
          },
        };
        try {
          await approvalClassifySaveOrModifyClassify(obj);
          this.info();
          this.$modal.msgSuccess("保存成功");
        } catch (err) {
          console.log(err);
        } finally {
          // this.$global.relieveFy(el);
        }
      } else {
        // this.$global.relieveFy(el);
      }
    },
    async info() {
      let { data } = await approvalClassifyInfo({ id: this.obj.id });
      if (data.ruleShow != "null") {
        let data1 = JSON.parse(data.ruleShow);
        if (data1.frontEndId && data.ruleShow) {
          let data2 = JSON.parse(data.ruleShow);
          this.nodeConfig = JSON.parse(data2.frontEndId);
        } else {
          this.nodeConfig = {};
        }
      } else {
        this.nodeConfig = {};
      }
    },
    add(id) {
      this.$refs.addDialog.init(id);
    },
  },
};
</script>
<style lang="less" scoped>
.he {
  background: red;
  height: 100px;
}
/deep/ .el-cascader {
  width: 100%;
}
/deep/ .el-select {
  width: 100%;
}
.plt20 {
  padding-left: 20px;
  padding-top: 20px;
}
.approval-flow {
  /deep/ .dingflow-design {
    .zoom {
      // position: fixed;
      height: 40px;
      width: 125px;
      right: 40px;
      margin-top: 30px;
      z-index: 10;
      display: flex;
      .zoom-in,
      .zoom-out {
        width: 30px;
        height: 30px;
        background: #fff;
        color: #c1c1cd;
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
      }

      .zoom-out {
        background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
      }

      .zoom-out.disabled {
        opacity: 0.5;
      }

      .zoom-in {
        background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
      }

      .zoom-in.disabled {
        opacity: 0.5;
      }
    }

    .box-scale {
      transform: scale(1);
      display: inline-block;
      position: relative;
      width: 100%;
      // padding: 54.5px 0;
      transform-origin: 0 0 0;
      left: 40%;
      .branch-wrap {
        .branch-box-wrap {
          margin-left: -240px;
          .auto-judge {
            position: relative;
            width: 280px;
            min-height: 100px;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;

            .title-wrapper {
              position: relative;
              font-size: 12px;
              color: #333;
              text-align: left;
              height: 38px;
              line-height: 38px;
              padding: 0 13px 0 0px;
              border-bottom: 1px solid #ebebeb;
            }
          }
        }
      }

      /deep/ .node-wrap-box {
        display: inline-flex;
        flex-direction: column;
        position: relative;
        width: 280px;
        min-height: 72px;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
      }

      /deep/ .node-wrap-box:after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        border-radius: 4px;
        border: 1px solid transparent;
        transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      }

      .end-node {
        justify-content: center;
        flex-direction: column;

        p {
          width: 280px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          text-align: center;
          background-color: #8cafff;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
  }
}
.btn-style {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
}
// 改过 外边大盒子
.fd-nav-content {
  // position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 30px;

  // position: fixed;
  // top: 60px;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // z-index: 1;
  // overflow-x: hidden;
  // overflow-y: auto;
  // padding-bottom: 30px;
}
// 改过
/deep/ .dingflow-design {
  width: calc(100% - 2% - 10px);
  background-color: #f5f8ff;
  overflow-y: auto;
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 0;
  top: 0px;
  // width: 100%;
  // background-color: #f5f8ff;
  // overflow: auto;
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // right: 0;
  // top: 0;
}
.editable-title {
  font-size: 14px;
  padding-left: 18px;
}
/deep/ .dingflow-design .ie-polyfill-container {
  display: -ms-grid;
  -ms-grid-columns: min-content;
}
/deep/ .dingflow-design .node-wrap {
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  // padding: 0 50px;
  position: relative;
}
/deep/ .dingflow-design .branch-wrap,
/deep/ .dingflow-design .node-wrap {
  display: inline-flex;
  // width: 100%;
}
/deep/ .dingflow-design .branch-box-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 270px;
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
/deep/ .dingflow-design .branch-box {
  display: flex;
  overflow: visible;
  min-height: 180px;
  height: auto;
  border-bottom: 1px solid #ebebeb;
  border-top: 1px solid #ebebeb;
  position: relative;
  margin-top: 15px;
}
/deep/ .dingflow-design .branch-box .col-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
/deep/ .dingflow-design .add-branch {
  border: none;
  outline: none;
  user-select: none;
  justify-content: center;
  font-size: 12px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #4880ff;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  cursor: pointer;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/deep/ .dingflow-design .add-branch:hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .dingflow-design .add-branch:active {
  transform: translateX(-50%);
  box-shadow: none;
}
/deep/ .dingflow-design .col-box {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
}
/deep/ .dingflow-design .condition-node {
  min-height: 220px;
}
/deep/ .dingflow-design .condition-node,
/deep/ .dingflow-design .condition-node-box {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
}
/deep/ .dingflow-design .condition-node-box {
  padding-top: 30px;
  padding-right: 50px;
  padding-left: 50px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-grow: 1;
  position: relative;
}
/deep/ .dingflow-design .condition-node-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-color: #ebebeb;
}
/deep/ .dingflow-design .auto-judge:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .dingflow-design .auto-judge.active:after,
/deep/ .dingflow-design .auto-judge:active:after,
/deep/ .dingflow-design .auto-judge:hover:after {
  border: 1px solid #4880ff;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}
/deep/ .dingflow-design .auto-judge.active .close,
/deep/ .dingflow-design .auto-judge:active .close,
/deep/ .dingflow-design .auto-judge:hover .close {
  display: block;
}
/deep/ .dingflow-design .auto-judge.error:after {
  border: 1px solid #f25643;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .dingflow-design .auto-judge .title-wrapper .editable-title {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}
/deep/ .dingflow-design .auto-judge .title-wrapper .priority-title {
  display: inline-block;
  float: right;
  margin-right: 35px;
  color: #828282;
}
/deep/ .dingflow-design .auto-judge .title-wrapper .priority-button {
  display: inline-block;
  height: 28px;
  float: right;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
}
/deep/ .dingflow-design .auto-judge .title-wrapper .priority-button div {
  display: inline-block;
}
/deep/
  .dingflow-design
  .auto-judge
  .title-wrapper
  .priority-button
  .priority-content {
  padding: 0 8px;
  font-size: 12px;
  line-height: 28px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
/deep/ .dingflow-design .auto-judge .placeholder {
  color: #bfbfbf;
}
/deep/ .dingflow-design .auto-judge .close {
  display: none;
  position: absolute;
  right: 22px;
  top: 8px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  z-index: 2;
}
/deep/ .dingflow-design .auto-judge .content {
  height: calc(100% - 39px);
  display: flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 0 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
/deep/ .dingflow-design .auto-judge .sort-left,
/deep/ .dingflow-design .auto-judge .sort-right {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 1;
  color: rgba(0, 0, 0, 0.25);
}
/deep/ .dingflow-design .auto-judge .sort-left {
  left: 4px;
  top: 33px;
  color: rgba(0, 0, 0, 0.5);
}
/deep/ .dingflow-design .auto-judge .sort-right {
  right: 26px;
  top: 33px;
}
/deep/ .dingflow-design .auto-judge:hover .sort-left,
/deep/ .dingflow-design .auto-judge:hover .sort-right {
  display: flex;
  align-items: center;
}
/deep/ .dingflow-design .add-node-btn {
  user-select: none;
  width: 240px;
  padding: 30px 0;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  flex-grow: 1;
  // margin-left: -55px;
}
/deep/ .dingflow-design .add-node-btn .btn {
  outline: none;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  width: 30px;
  height: 30px;
  background: #4880ff;
  border-radius: 50%;
  position: relative;
  border: none;
  line-height: 30px;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  // margin-left: 36px;
}
/deep/ .dingflow-design .add-node-btn .btn .iconfont {
  color: #fff;
  font-size: 16px;
}
/deep/ .dingflow-design .add-node-btn .btn:hover {
  transform: scale(1.3);
  box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
}
/deep/ .dingflow-design .add-node-btn .btn:active {
  transform: none;
  background: #1e83e9;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.top-left-cover-line {
  left: -1px;
}

.top-left-cover-line,
.top-right-cover-line {
  position: absolute;
  height: 3px;
  width: 50%;
  background-color: #f5f8ff;
  top: -2px;
}

.top-right-cover-line {
  right: -1px;
}

.bottom-left-cover-line {
  left: -1px;
}

.bottom-left-cover-line,
.bottom-right-cover-line {
  position: absolute;
  height: 3px;
  width: 50%;
  background-color: #f5f8ff;
  bottom: -2px;
}

.bottom-right-cover-line {
  right: -1px;
}

/deep/ .node-wrap-box.active:after,
/deep/ .node-wrap-box:active:after,
/deep/ .node-wrap-box:hover:after {
  border: 1px solid #3296fa;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

/deep/ .node-wrap-box.active .close,
/deep/ .node-wrap-box:active .close,
/deep/ .node-wrap-box:hover .close {
  display: block;
}

/deep/ .node-wrap-box.error:after {
  border: 1px solid #f25643;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

/deep/ .node-wrap-box .title {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
  // padding-right: 30px;
  // width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  text-align: left;
  background: #576a95;
  border-radius: 4px 4px 0 0;
}

/deep/ .node-wrap-box .title .iconfont {
  font-size: 12px;
  margin-right: 5px;
}

/deep/ .node-wrap-box .placeholder {
  color: #bfbfbf;
}

/deep/ .node-wrap-box .close {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

/deep/ .node-wrap-box .content {
  position: relative;
  font-size: 14px;
  padding: 20px 18px;
  /* padding-right: 30px */
}

/deep/ .node-wrap-box .content .text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/deep/ .node-wrap-box .content .arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 14px;
  font-size: 14px;
  color: #979797;
}

.start-node/deep/ .node-wrap-box .content .text {
  display: block;
  white-space: nowrap;
}
</style>
